<template>
  <!-- 围栏选项 -->
  <el-dialog class="my-dialog" :title="`${userDetail? `【${userDetail.nickName}】`:''}当天运动轨迹`"
             :visible.sync="dialogvisible"
             width="90%" append-to-body @close="cancel">
    <div class="user-info">
      <div class="user-info-box">
        <div id="container" class="mapPoint"></div>
        <div class="user-info-p">
          <div class="user-info-p-top">
            <p>姓名：{{ userDetail ? userDetail.nickName : '' }}</p>
            <p>日期：{{ workData ? workData.dayName : '' }}</p>
            <p>当天班次：
              <span v-if="workData && workData.cate">
              {{ workData.cate.name }}
                  {{
                  `${workData.cate.comeTime1}-${workData.cate.outNext1 ? '次日' : ''}${workData.cate.outTime1} ${workData.cate.comeTime2 && workData.cate.comeNext2 ? '次日' : ''}${workData.comeTime2 || ''}${workData.cate.comeTime2 ? '-' : ''}${workData.cate.outTime2 && workData.cate.outNext2 ? '次日' : ''}${workData.cate.outTime2 || ''}`
                }}
            </span>
              <span v-else>
              休息
            </span></p>
            <p>执勤点：{{ pointsData ? pointsData.name : '' }}</p>
          </div>
          <div class="user-info-p-log">
            <div class="user-info-p-log-header">
              <span class="td1">坐标</span>
              <span class="td2">时间</span>
              <span class="td3">状态</span>
            </div>
            <div class="user-info-p-table">
              <template v-if="path.length">
                <div v-for="(item, index) in path" class="user-info-p-tr" @click="setPoint(item)">
                  <span class="td1 tdbox" style="color: #999">{{ item.lon }},{{ item.lat }}</span>
                  <span class="td2 tdbox" style="color: #000">2024-03-26 13:00</span>
                  <span class="td3 tdbox">
                  <el-tag type="success" size="mini" v-if="item.type==0">正常</el-tag>
                    <el-tag type="danger" size="mini" v-if="item.type==1">异常</el-tag>
                </span>
                </div>
              </template>
              <template v-else>
                <div class="user-info-p-tr not-data" >
                 未找到相应轨迹记录
                </div>
              </template>
            </div>

          </div>
        </div>
      </div>
    </div>
    <!--    <div slot="footer" class="dialog-footer">-->
    <!--      <el-button type="danger" @click="clearFn" size="small" plain>清空区域</el-button>-->
    <!--      <el-button type="primary" @click="confirmAndClose" size="small" plain>确定并退出</el-button>-->
    <!--      <el-button @click="cancel" size="small">取 消</el-button>-->
    <!--    </div>-->
  </el-dialog>
</template>
<script>
import {trackList} from "@/api/system/attendLog"

export default {
  name: "mapPoint",
  props: ['visible', 'userDetail', 'pointsData', 'workData'],
  data() {
    return {
      dialogvisible: false,
      mapPosition: [],
      editorTool: null,
      polygon: null,
      overlays: null,
      map: null,
      // path: [
      //   {longitude: 118.11251, latitude: 24.49411},
      //   {longitude: 118.112206, latitude: 24.494213},
      //   {longitude: 118.11189, latitude: 24.494248},
      //   {longitude: 118.111529, latitude: 24.49445},
      //   {longitude: 118.111263, latitude: 24.494651},
      //   {longitude: 118.111655, latitude: 24.494916},
      //   {longitude: 118.112099, latitude: 24.495216},
      //   {longitude: 118.11258, latitude: 24.49547},
      //   {longitude: 118.112985, latitude: 24.495372},
      //   {longitude: 118.11327, latitude: 24.494968},
      //   {longitude: 118.11358, latitude: 24.49513},
      //   {longitude: 118.113808, latitude: 24.495602},
      //   {longitude: 118.114074, latitude: 24.496196},
      //   {longitude: 118.114226, latitude: 24.496628},
      // ],
      path: [],
      polyline: null
    }
  },
  watch: {
    visible() {
      this.dialogvisible = this.visible
      console.log('pointsData', this.pointsData)
      if (this.visible) {
        this.getUserLog()
      } else {
        this.path = []
      }
    }
  },
  created() {
  },
  methods: {
    getUserLog() {
      // day string 可选 日期2024-03-26
      // userld string 用户ID可选
      // pointsId string 驻点ID
      trackList({
        day: this.workData.dayName,
        userId: this.userDetail.userId,
        pointsId: this.pointsData.id
      }).then(res => {
        console.log('res=>', res)
        this.path = this.$deepCopy(res.rows)
        this.initMap()
      })

    },
    clearFn() {
      console.log('this.overlays:', this.overlays)
      if (this.overlays) {
        this.overlays = [];
        this.map.clearMap(); // 清除地图上的所有覆盖物
        // this.overlays.setPath({path: []});
        // this.overlays.setPath(null);
        // this.map.remove(this.overlays);
        // this.map.removeLayer()
        // this.overlays = []
        // this.map.remove(this.overlays)
        // // this.map.removeOverlay();
        // this.map.clearMap();
        // // this.map.remove(this.overlays);
        // this.overlays = null
        // this.map.removeOverlay()
      }
    },
    //获取多边形或者圆形的组成信息
    getOverlayPathDataInfo() {
      if (this.overlays) {
        let pointsCount = this.overlays.getPath().length;
        let polygonArr = new Array(); //构建多边形经纬度坐标数组
        let munityAreaList = []
        console.log('pointsCount', pointsCount)
        for (let i = 0; i < pointsCount; i++) {
          polygonArr.push(new AMap.LngLat(this.overlays.getPath()[i].lng, this.overlays.getPath()[i].lat));
          let pointObj = new Object();
          pointObj.lat = this.overlays.getPath()[i].lat;
          pointObj.lng = this.overlays.getPath()[i].lng;
          munityAreaList[i] = pointObj;
        }
        return munityAreaList
      } else {
        return false
      }
    },
    //确定并退出
    confirmAndClose() {
      if (!this.getOverlayPathDataInfo()) {
        this.$message.error('请点出区域坐标内容')
      } else {
        this.$emit('getPoint', JSON.stringify(this.getOverlayPathDataInfo()))
        this.cancel()
      }
    },
    setPoint(item) {
      this.map.setCenter([parseFloat(item.lon), parseFloat(item.lat)]);
    },
    initMap() {
      let that = this
      this.$nextTick(() => {
        let path_ = []
        for (let itme of that.path) {
          path_.push([itme.lon, itme.lat])
        }
        let center = path_[0]
        let MapZoom = 16
        // if(this.form.lon && this.form.lat){
        //   center = [this.form.lon, this.form.lat]
        //   MapZoom = 17
        // }
        that.map = new AMap.Map('container', {
          mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
          resizeEnable: true,
          center: [that.pointsData.lon, that.pointsData.lat],
          zoom: MapZoom
        })

        let icon_start = new AMap.Icon({
          size: new AMap.Size(18, 20), // 图标尺寸
          image: require("@/assets/images/start.png"), // Icon的图像
          imageSize: new AMap.Size(18, 20), // 根据所设置的大小拉伸或压缩图片
        });
        that.marker = new AMap.Marker({
          icon: icon_start,
          position: path_[0],
          offset: new AMap.Pixel(-10, -20),
        });
        that.map.add(that.marker);
        let icon_end = new AMap.Icon({
          size: new AMap.Size(18, 20), // 图标尺寸
          image: require("@/assets/images/end.png"), // Icon的图像
          imageSize: new AMap.Size(18, 20), // 根据所设置的大小拉伸或压缩图片
        });
        that.marker = new AMap.Marker({
          icon: icon_end,
          position: path_[path_.length - 1],
          offset: new AMap.Pixel(-10, -20),
        });
        that.map.add(that.marker);
        that.polyline = new AMap.Polyline({
          path: path_,
          borderWeight: 2,
          strokeColor: 'blue',
        });
        that.polyline.setMap(that.map);
        if (that.pointsData.rangePoints) {
          let polygonArray;
          polygonArray = JSON.parse(that.pointsData.rangePoints); //构建多边形经纬度坐标数组
          let arr = [];
          for (let j = 0; j < polygonArray.length; j++) {
            let ob = polygonArray[j];
            arr.push(new AMap.LngLat(ob.lng, ob.lat));
          }
          let zIndex = 10;
          let poly = new AMap.Polygon({
            map: that.map,
            path: arr,
            zIndex: zIndex,
            strokeColor: "#555",
            strokeOpacity: 0.5,
            strokeWeight: 1.5,
            // fillColor: strokeColor,
            fillOpacity: 0.35
          });
          poly.setMap(that.map);
        }
      })
    },
    cancel() {
      this.$emit('update:visible', false)
    },
  }
}
</script>

<style scoped>
.mapPoint {
  width: 100%;
  height: 600px;
}

.user-info-box {
  position: relative;
}

.user-info-p {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 600px;
  box-sizing: border-box;
}

.user-info-p-top {
  background: #061da4ba;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.user-info-p p {
  margin: 0;
  color: #fff;
  font-size: 12px;
}

.user-info-p-log {
  background: rgba(255, 255, 255, .7);
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
}

.user-info-p-log span {
  font-size: 12px;
}

.user-info-p-log-header {
  display: flex;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #eee;
  background: #bebebe61;
}

.user-info-p-log-header span {
  border-right: 1px solid #eee;
  font-weight: 500;
}

.user-info-p-log-header span:last-child {
  border-right: none;
}

.user-info-p-log-header span, .user-info-p-tr .tdbox {
  text-align: center;
  display: block;
}

.user-info-p-tr {
  display: flex;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  align-items: center;
}

.user-info-p-tr:hover {
  background: #eee;
}
.not-data{
  padding: 20px 0;
  display: flex;
  justify-content: center;
  font-size: 12px;
}
.user-info-p-log .td1 {
  width: 130px;
}

.user-info-p-log .td2 {
  width: 120px;
}

.user-info-p-log .td3 {
  flex: 1;
  padding: 0 10px;
}

.user-info-p-table {
  flex: 1;
  overflow-y: auto;
}
</style>
<!--<div class="user-info-p">-->
<!--<div class="user-info-p-top">-->
<!--  <p>姓名：小王</p>-->
<!--  <p>日期：2024-03-01</p>-->
<!--  <p>当天班次：白班8：00-10：00</p>-->
<!--  <p>执勤点：白凤堂青海</p>-->
<!--</div>-->
<!--<div class="user-info-p-log">-->
<!--  <div class="user-info-user-info-pp-log-header">-->
<!--    <span>坐标</span>-->
<!--    <span>时间</span>-->
<!--  </div>-->
<!--  <div class="user-info-p-table">-->
<!--    <div v-for="item in path" class="user-info-p-tr">-->
<!--      <span>{{item.longitude}},{{item.latitude}}</span>-->
<!--      <span>2024-03-26 13:00</span>-->
<!--    </div>-->
<!--  </div>-->
<!--</div>-->
<!--</div>-->
